<template>
  <ElRow :gutter="20" justify="space-between">
    <ElCol :xl="6" :lg="6" :md="12" :sm="12" :xs="24" v-for="data in homepage.shu" :key="data.b">
      <ElCard shadow="hover" class="mb-20px">
        <div class="aa">
          <div>{{ data.a }}</div>
          <div style="text-align: right">
            <span style="font-weight: bolder; color: #ff6700">{{ data.b }}</span> /千克
          </div>
        </div>
      </ElCard>
    </ElCol>
  </ElRow>
  <div class="echarts-box">
    <ElCard shadow="hover" :body-style="{ margin: '20px' }">
      <div id="myEchartss" :style="{ height: '500px' }"></div>
    </ElCard>
    <ElCard shadow="hover" :body-style="{ margin: '20px' }">
      <div id="myEcharts" :style="{ height: '500px' }"></div>
    </ElCard>
  </div>
</template>

<script setup>
import { usehomepage } from '@/store/views/SmartPasture/Gather/HomePage'
import { ElRow, ElCol, ElCard } from 'element-plus'
import * as echarts from 'echarts'
import { onMounted } from 'vue'
let myEcharts = echarts

const homepage = usehomepage()

onMounted(() => {
  homepage.zhneg()
  initChart()
  initCharts()
})
function initChart() {
  let chart = myEcharts.init(document.getElementById('myEcharts'), 'purple-passion')
  chart.setOption({
    title: {
      text: '粪便记录',
      subtext: 'Fake Data',
      left: 'center'
    },
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      left: 'left'
    },
    series: [
      {
        name: '粪便记录',
        type: 'pie',
        radius: '50%',
        data: [
          { value: homepage.shu[3].b, name: '剩余' },
          { value: homepage.shu[2].b, name: '卖出' }
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  })
  window.onresize = function () {
    chart.resize()
  }
}
function initCharts() {
  let chart = myEcharts.init(document.getElementById('myEchartss'))
  chart.setOption({
    title: {
      text: '牛角记录',
      subtext: 'Fake Data',
      left: 'center'
    },
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      left: 'left'
    },
    series: [
      {
        name: 'Access From',
        type: 'pie',
        radius: '50%',
        data: [
          { value: homepage.shu[1].b, name: '剩余' },
          { value: homepage.shu[0].b, name: '卖出' }
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  })
  window.onresize = function () {
    chart.resize()
  }
}
</script>
<style scoped>
.aa {
  color: rgb(107, 114, 128);
}
.aa,
.echarts-box {
  display: flex;
}
.aa > div,
.echarts-box > div {
  flex: 1;
}
.el-card {
  margin: 20px;
}
</style>
